<template>
  <div class="home-page">
    <img  style="width: 100% !important;max-width: 100% !important;" src="@/assets/banner.jpg" alt="">
    <a-row style="margin-top:10px;display:flex;flex-wrap: wrap;">

      <a-card :title="$t('key.myNews')" :style="{width: isMobile ? '100%' : '55%'}">
        <template slot="extra" >
            <a-button @click="deleteMsg">{{ $t(`button.deleteSet`) }}</a-button>
            <a-button @click="deleteMsgAll">{{ $t(`button.empty`) }} </a-button>
        </template>
        <a-list
            :loading="loading"
            itemLayout="horizontal"
            :dataSource="messageList"
            :pagination="pagination"
        >
          <a-list-item slot="renderItem" slot-scope="item, index">
            <!-- <a slot="actions"  v-if="item.type!==6"  @click="showDetails(item.type, item.foreignKey, item.foreignStatus, item.id)">{{ $t(`button.showStu`) }}</a> -->
            <a-list-item-meta class="msg-list" :description="item.info">
              <span slot="title">
                {{item.title}}
              </span>
              <span slot="avatar">
                <a-checkbox @change="checkBoxChange" :key="item.id" :value="item.id" />
              </span>
            </a-list-item-meta>
          </a-list-item>
        </a-list>
      </a-card>
      


      <a-card :title="$t('key.announcement')" :style="{width: isMobile ? '100%' : '44%', 'margin-left': isMobile ? '0' : '1%'}">
        <a-list
          :loading="noticeLoading"
          itemLayout="horizontal"
          :dataSource="noticeList"
          :pagination="noticePagination"
        >
          <a-list-item slot="renderItem" slot-scope="item">
            <a slot="actions"  @click="showNote(item.id)">{{ $t(`button.showStu`) }}</a>
            <h4 class="ant-list-item-meta-title">
              <a>{{ item.ggbt }}</a>
            </h4>
          </a-list-item>
        </a-list>
      </a-card>
    </a-row>

    <a-row style="margin-top:10px;display:flex;flex-wrap: wrap;">
      <a-card class="student-status-list" :title="$t('key.quickEntry')" :style="{width: isMobile ? '100%' : '55%'}">
        <a-card-grid v-for="menu in menus" :key="menu.id" @click="toPath(menu.path)" style="width:25%;textAlign:'center'">
          <Icon :type="menu.icon"/><br/>
          {{ $t(`menu.${menu.name}`) }}
        </a-card-grid>
      </a-card>
    </a-row>

    <a-modal
        title="流程状态"
        :visible="visible"
        @cancel="visible = false"
        :width="700"
        cancelText="关闭"
      >
      <a-steps :current="1">
        <a-step>
          <template slot="title">
            Finished
          </template>
          <span slot="description">This is a description.</span>
        </a-step>
        <a-step title="In Progress" description="This is a description." />
        <a-step title="Waiting" description="This is a description." />
      </a-steps>
    </a-modal>
  </div>
</template>
<script>
import HeadInfo from '@/views/common/HeadInfo'
import {mapState} from 'vuex'
import moment from 'moment'
import Icon from 'ant-design-vue/es/icon'
// import {api} from '@/api'
moment.locale('zh-cn')

export default {
  name: 'HomePage',
  components: {HeadInfo, Icon},
  data () {
    return {
      totalStudent: 0,
      totalArrearage: 0,
      arrearageRate: 0,
      visible: false,
      contentList: {
        tab1: 'content1',
        tab2: 'content2'
      },
      tabLeftList: [{
        key: 'department',
        tab: '按院系'
      }, {
        key: 'major',
        tab: '按专业'
      }],
      tabRightList: [{
        key: 'doctor',
        tab: '博士招生计划'
      }, {
        key: 'master',
        tab: '硕士招生计划'
      }],
      tabKey: ['department', 'doctor'],
      chartOptions: {
        chart: {
          id: 'vuechart-example'
        },
        xaxis: {
          categories: ['研究生院', '商学院', '旅游管理', '信息管理学院', '文学院', '法学院', '新闻与传播学院', '外语学院']
        }
      },
      msgSelect: [],
      series: [{
        name: '学生人数',
        data: [30, 40, 35, 50, 49, 60, 70, 91]
      }],
      loading: true,
      noticeLoading: true,
      noticeList: [],
      messageList: [],
      pagination: {
        onChange: (page) => {
          this.loadMessage(page)
        },
        current: 1,
        pageSize: 4,
        total: 0
      },
      noticePagination: {
        onChange: (page) => {
          this.loadNotice(page)
        },
        current: 1,
        pageSize: 4,
        total: 0
      },
    }
  },
  created () {
    this.initPage()
    
  },
  computed: {
    ...mapState({
      menuData: state => state.setting.menuData,
      isMobile: state => state.setting.isMobile
    }),
    menus () {
      return this.menuData.filter(menu => {
        return !menu.hidden
      })
    }
  },
  methods: {
    onTabChange (key, val) {
      this.$set(this.tabKey, key, val)
    },
    showNote(id){
      this.$router.push(`/bind/noticeView?id=${id}`)
    },
    initPage () {
      this.loadNotice(this.noticePagination.current)
      this.loadMessage(this.pagination.current)
    },
    checkBoxChange(e){
        if( e.target.checked && !this.msgSelect.includes(e.target.value)){
          this.msgSelect.push(e.target.value)
        }else if(!e.target.checked && this.msgSelect.includes(e.target.value)){
          this.msgSelect.splice(this.msgSelect.indexOf(e.target.value),1)
        }
    },
    deleteMsg(){
      if(this.msgSelect.length < 1 ){
          this.$message.warning('请选择要删除的消息')
          return;
        };
        this.$api.base.sysMessageDelete(this.msgSelect.join(',')).then(() => {
            this.$message.success('删除成功')
            this.loadMessage(1)
        })
    },
    deleteMsgAll(){
        if(this.messages.length < 1 ){
          this.$message.success('已经没有消息啦！')
          return;
        };
        this.$api.base.sysMessageDeleteAll().then(() => {
            this.$message.success('删除成功')
            this.loadMessage(1)
        })
    },
    loadNotice (pageNum) {
      let parameter = {}
      this.noticePagination.current = pageNum
      parameter.pageNum = pageNum
      parameter.pageSize = 4
      this.$api.home.noticeList(parameter).then(res => {
        this.noticeList = res.data.rows
        this.noticePagination.total = res.data.total
        this.noticeLoading = false
      })
    },
    loadMessage (pageNum) {
      let parameter = {}
      this.pagination.current = pageNum
      parameter.pageNum = pageNum
      parameter.pageSize = 4
      this.$api.home.messageList(parameter).then(res => {
        this.messageList = res.data.rows
        this.pagination.total = res.data.total
        this.loading = false
        this.msgSelect = []
      })
    },
    toPath (path) {
      this.$router.push(path)
    },
    showDetails(type, key, status) {
      let path = ''
      switch (type) {
        case 1:// 异动
          path = '/student/change/view?id=' + key
          break
        case 2:// 外宿
          break
        case 3:// 注册
          // path = "student/stuStatus/stuStatusEdit?xh=" + key
          break
        case 4:// 学籍补充
          // if (status === '01') { // 待审核
          //   path = '/stuStatus/check?xh=' + key
          // } else { // 其他状态查看
            path = '/stuStatus/stuView?xh=' + key
          // }
          break
        case 5:// 培养计划
          break
        case 7:
            path = '/training/courses/schedule/transfer/detail?id=' + key
          break
        default:
          break
      }
      this.toPath(path)
    }
  }
}
</script>
<style lang="less">
.home-page{
  width: 100%;
  .big-num{
    color: #101010;
    font-size: 28px;
    border-bottom: 1px solid #bbb;
    padding-bottom: 16px;
    margin-bottom: 16px;
  }
  .rate-people-text{
    line-height: 30px;
  }
  p{
    white-space: pre-wrap;
  }
  .student-status-list{
    .ant-card-body{
      text-align: center;
    }
    img{
      width: 59px;
      height: 45px;
    }
  }
  .todo-item{
    display: flex;
    justify-content: space-between;
  }
  .table-right .ant-card-head,.table-right .ant-card-head .ant-tabs-bar{
    border-bottom: none;
  }
  .enrollment-plan_list{
    padding-bottom: 80%;
    height: 0;
    overflow: auto;
    position: relative;
    .list-wrap{
      position:absolute;
    }
    .list-item{
      padding: 0 16px 16px;
      font-size: 16px;
      color: #595959;
      display: flex;
      justify-content: space-between;
    }
  }

  .ant-card-body{
    padding: 0 12px;
  }

  .ant-list-item{
    padding: 12px 0;
  }

  .ant-list-pagination{
    margin-top: 12px;
    margin-bottom: 12px;
  }

  .ant-list-item-meta{
    display: flex;
    align-items: center;
  }
}
</style>
